<template>
<div class="use-element-by-point">
  <div class="test">UseElementByPoint</div>
  <div class="out">
    <div class="middle">
      <div class="inner"></div>
    </div>
  </div>
</div>
  <p>{{ element.className }}</p>
</template>

<script setup lang="ts">
import { useElementByPoint, useMouse } from "@vueuse/core";

defineOptions({
  name: "UseElementByPoint"
})

const { x, y } = useMouse({ type: 'client'})
const { element } = useElementByPoint({ x, y })
</script>

<style scoped lang="css">
.use-element-by-point {
  .inner {
    width: 200px;
    height: 200px;
    background-color: pink;
  }
  .middle {
    padding: 100px;
    background-color: lightblue;
  }
  .out {
    padding: 100px;
    background: lightgreen;
  }
}
</style>
